<template>
  <div class="message-content">
    <div class="message-header">
      <van-image round width="40px" height="40px" fit="cover" :src="messageitem.head" />
    </div>
    <div class="messga-content-right">
        <span class="message-content-right-top">{{messageitem.name}}</span>
        <span class="message-content-right-bottom">{{messageitem.content}}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "MessageItem",
  props:['messageitem']
};
</script>

<style scoped>
.message-content {
  height: 70px;
  width: 100%;
  border-bottom: solid 1px #f2f2f2;
  display: flex;
}
.message-header {
  width: 70px;
  margin-left: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.messga-content-right{
    margin-left: 15px;
    display: grid;
    flex: 1;
    /* align-content: center; */
}
.message-content-right-bottom{
    color: #333333;
    font-size: 13px;
    width: 100%;
}
.message-content-right-top{
    font-weight: 600;
}
</style>